<template>
	<div class="login">
		<div class="bg-image" style="font-size: 0;height: 100%;width: 100%;">
			<img :style="styleimg" src="http://tyunfile.71360.com/UpLoadFile/2019/6/29/11/636974050178251710_djjz_7143676.jpg" alt="" />
		</div>
		
		<div class="login">
			<div class="logo">
				<img  src="../../static/img/logo.png"/>
			</div>
			<div class="login-title" >
				登录/注册
			</div>
			
			<div class="login-input" style="margin-top: 20px;">
				<Input class="login-input-phone" v-model="username" size="large" placeholder="请输入手机号" ></Input>
			</div>
			<div class="login-input" >
				<Input class="login-input-password" @keyup.enter="dologin" v-model="password" size="large" type="password" placeholder="请输入验证码" >
					<Button slot="append">获取验证码</Button>
				</Input>
			</div>
			
			
			
			<Button class="login-button" size="large" type="success" @click="dologin" >登录</Button>
			<div class="big-hiddle" style="width: 100%;height: 150px;background-color: white;"></div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				username: "",
				password: "",
			}
		},
		computed: {
			styleimg: function() {
				return {
					width: "100%",
					height: document.documentElement.clientHeight - 75 + "px",
				}
			},
		},
		methods: {
			dologin: function() {
				this.$router.push("/")
			}
		}
	}
</script>

<style lang="css" scoped>
	/** 电脑 **/
	
	@media only screen and (min-width: 540px) {
		.login >>> .logo{
			display: none;
		}
		.login >>> .login{
			position: absolute;
			right:17%;
			top:50%;
			margin-top:-200px;
			width: 360px;
			height: 400px;
			-moz-box-shadow:-1px 1px 10px #DBDBDB;
			background-color: white;
			border-radius: 5px;
		}
		.login >>> .login-title{
			font-size: 20px;
			margin-top: 50px;
			margin-left: 40px;
		}
		.login >>> .login-input{
			width: 100%;
			display: flex;
			justify-content: center;
		}
		.login >>> .login-input-phone{
			margin:10px;
			width: 80% !important;
		}
		.login >>> .login-input-password{
			margin:10px;
			width: 80% !important;
		}
		.login >>> .login-button{
			background-color: #009a00;
			margin-top:25px;
			margin-left: 40px;
			width: 280px;
			height: 40px;
		}
		.login >>> .big-hiddle{
			display: none;
		}
	}
	/** 手机 **/
	
	@media only screen and (max-width: 540px) {
		.login >>> .bg-image{
			display: none;
		}
		.login >>> .logo{
			width: 100%;
			text-align: center;
			margin-bottom: 80px;
		}
		.login >>> .login{
			width: 100%;
			text-align: center;
			/*position: absolute;
			top: 20%;*/
		}
		.login >>> .login-title{
			font-size: 20px;
			text-align: center;
		}
		.login >>> .login-input{
			width: 100%;
			display: flex;
			justify-content: center;
		}
		.login >>> .login-input-phone{
			margin:5px;
			width: 80% !important;
		}
		.login >>> .login-input-password{
			margin:5px;
			width: 80% !important;
		}
		.login >>> .login-button{
			margin-top: 20px;
			background-color: #009a00;
			width: 80%;
		}
	}
</style>